<template>
	<view style="width: calc(100% - 20rpx); height: calc(100% - 20rpx); padding: 10rpx;">
		<view style="width: calc(100% - 20rpx);background-color: #fff;margin:10rpx auto 15rpx;padding:15rpx;">
			<view style="width: 100%;display: flex; align-items: center; justify-content: space-between;">
				<view style="display: flex; align-items: center; flex: 1; margin-right: 10rpx;">
					<view style="margin-right: 10rpx; font-weight: bold;font-size: 24rpx;" @click="showPicker">所属单位</view>
					<view class="inputSelector">
						<view style="padding: 0 10rpx 0 20rpx; flex: 1;line-height: 55rpx;" @click="showPicker">{{companyIdText || '请选择'}}</view>
						<view style="padding-right: 20rpx;line-height: 55rpx;">
							<uni-icons v-if="companyIdText" class="content-clear-icon is-textarea-icon" type="clear" size="20px" color="#c0c4cc"
							 @click.stop.prevent="onClear" ></uni-icons>
							<uni-icons v-else type="bottom" size="14" color="#999"  @click="showPicker"/>
						</view>
					</view>
				</view>
				<button type="primary" @click="submit()" style="width: 100rpx;height: 50rpx;line-height: 50rpx; font-size: 22rpx;background-color: #5E9CF1;margin-right: 0;">搜索</button>
			</view>
		</view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"
				@selection-change="selectionChange" style="min-width: 0;">
				<uni-tr style="font-size: 10rpx;">
					<uni-th width="10" align="center">设备ID</uni-th>
					<uni-th width="10" align="center"> 终端号 </uni-th>
					<uni-th width="10" align="center">名称</uni-th>
					<!-- <uni-th width="10" align="center">所属单位</uni-th> -->
					<uni-th width="10" align="center">规格</uni-th>
					<uni-th width="10" align="center">SIM号</uni-th>
					<uni-th width="10" align="center">新增时间</uni-th>
					<!-- <uni-th width="10" align="center">接入位置</uni-th> -->
					<!-- <uni-th width="10" align="center">油罐类型</uni-th>
					<uni-th width="10" align="center">物料种类</uni-th>
					<uni-th width="10" align="center">温度(C)</uni-th>
					<uni-th width="10" align="center">液位(mm)</uni-th>
					<uni-th width="10" align="center">密度</uni-th> -->
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td width="10" align="center">{{ item.id }}</uni-td>
					<uni-td width="10" align="center">{{ item.tel }}</uni-td>
					<uni-td width="10" align="center">{{ item.name }}</uni-td>
					<!-- <uni-td>{{ item.queryCompanyIds }}</uni-td> -->
					<uni-td width="10" align="center">{{ item.terCode }}</uni-td>
					<uni-td width="10" align="center">{{ item.sim }}</uni-td>
					<uni-td width="10" align="center">{{ item.modifyDate }}</uni-td>
					<!-- <uni-td>{{ item.itemPoints }}</uni-td> -->
					<!-- <uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary">修改</button>
							<button class="uni-button" size="mini" type="warn">删除</button>
						</view>
					</uni-td> -->
				</uni-tr>
			</uni-table>
			<!-- <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view> -->
		</view>
		<ba-tree-picker v-if="treePickerState" ref="treePicker" :multiple='false' @select-change="selectChange" title="请选择所属单位"
			:localdata="findTreeData" valueKey="id" textKey="name" childrenKey="children" :confirmColor="'#0055ff'" />
	</view>
</template>

<script>
	let tableData = [{
		"date": "2020-09-01",
		"name": "(应急中心)越州基地1号-1000吨",
		"materialType": "沥青",
		"oilTankType": "立罐",
		"temperature": "0",
		"level": "0",
		"density": "1.035"
	}]
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
	export default {
		components: {
			baTreePicker,
		},
		data() {
			return {
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 1000,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				findTreeData: [],
				companyId:'',
				companyIdText:'',
				treePickerState:true,
			}
		},
		methods: {
			onClear(){
				this.companyId = ''
				this.companyIdText = ''
				this.treePickerState = false
				setTimeout(function(){
					this.treePickerState = true
				}.bind(this),500)
			},
			showPicker() {
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				console.log(ids, names)
				this.companyId = ids[0]
				this.companyIdText = names
			},
			// 搜索
			submit() {
				this.getMaterialInventory('up')
			},
			close() {
				this.getMaterialInventory('up')
				this.$refs.alertToDialog.close()
			},
			// 多选处理
			// selectedItems() {
			// 	return this.selectedIndexs.map(i => this.tableData[i])
			// },
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			// delTable() {
			// 	console.log(this.selectedItems())
			// },
			// 分页触发
			// change(e) {
			// 	this.$refs.table.clearSelection()
			// 	this.selectedIndexs.length = 0
			// 	this.getData(e.current)
			// },
			// // 搜索
			// search() {
			// 	this.getData(1, this.searchVal)
			// },
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},
			getMaterialInventory(){
				uni.showLoading({title: '数据加载中...',mask: true})
				this.$http.get('/api/v1/deviceInfo/list', {
					page:1,
					limit:2000,
					companyId:this.companyId
				}, true).then(res => {
					if (res.data) {
						this.tableData = res.data
					} else {
						uni.showToast({title: res.msg,icon: 'none'});
					}
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'});
				})
			}
		},
		onLoad() {
			// this.getData(1)
			this.getMaterialInventory()
			if (this.$method.getStorageTo("findTree")) {
				this.findTreeData = this.$method.getStorageTo("findTree")
			} else {
				this.$http.get('/api/v1/sysCompany/findTree', {}, true).then(res => {
					if (res.data.items) {
						this.findTreeData = res.data.items
						this.$method.setStorageTo("findTree", res.data.items)
					} else {
						uni.showToast({title: res.msg,icon: 'none'});
					}
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'});
				})
			}
		},
		onShow() {}
	}
</script>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		// background-color: #fff;
		// overflow-y: scroll;
	}

	.uni-table {
		min-width: 0px !important;
	}

	.uni-table-th {
		font-size: 18rpx !important;
		padding: 10rpx !important;
	}

	.uni-table-td {
		font-size: 18rpx !important;
		padding: 10rpx !important;
	}

	// .uni-table-tr .uni-table-th:nth-last-child(1){
	// 	width: 2%;
	// }
	// .uni-table-tr .uni-table-th:nth-last-child(2){
	// 	width: 20%;
	// }
	// .uni-table-tr .uni-table-td:nth-last-child(1){
	// 	width: 2%;
	// }
	
	.inputSelector{
		font-size: 24rpx;
		border: 2rpx solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 8rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		flex: 1;
		height: 55rpx;
		justify-content: space-between;
	}
</style>